<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>付款页面</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="success_pay">
        <div class="site_wrap">
            <img src="./images/eg.png" alt="">
            <h2>Orly烤肉店</h2>
            <span>订单金额</span>
        </div>
        <div class="pay_content">
            <div class="pay_input">
                <span>￥</span>
                <div class="relative_box">
                    <span class="cursor_blink"><img src="./images/gb.gif" alt=""></span>
                    <div class="point-focus" id="div"></div>
                </div>
            </div>
            <ul class="dj_ky">
                <li>冻结金额(¥): 6666.66</li>
                <li class="c_gray">可用金额(¥): 0</li>
            </ul>
        </div>
        <div class="pay_notice">
            <div class="left_img">
                <img src="./images/wx.png" alt="2022张家口公众号">
            </div>
            <div class="right_text">
                <p>长按二维码，关注公众号 </p>
                <div class="bm"><i>解冻</i>商户补贴<img src="./images/icont_handle.png"><img src="./images/icont_handle.png"></div>
            </div>
        </div>
    </div>

    <!-- 模拟键盘 -->
    <div class="keyboard_wrap">
        <div class="keyboard_box">
            <div class="row_wrap">
                <div class="number">1</div>
                <div class="number">4</div>
                <div class="number">7</div>
                <div class="numbers">&nbsp;</div>
            </div>
            <div class="row_wrap">
                <div class="number">2</div>
                <div class="number">5</div>
                <div class="number">8</div>
                <div class="number">0</div>
            </div>
            <div class="row_wrap">
                <div class="number">3</div>
                <div class="number">6</div>
                <div class="number">9</div>
                <div class="number">.</div>
            </div>
            <div class="row_wrap">
                <div class="remove">
                    <img src="./images/back_icont.png" alt="">
                </div>
                <div class="paynow" id="submit_button">
                    <span>立即</span>
                    <span>支付</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 订单弹框 -->

    <div class="popup">
        <div class="popup-title">
            <a href="#" class="close" id="pay_close_btn"></a>
            <span>确认付款</span>
        </div>
        <div class="popup-points">
            <ul>
                <li>
                    <span>订单金额</span>
                    <span id="originalPrice"></span>
                </li>
                <li>
                    <span>积分抵扣</span>
                    <span id="totalPointE"></span>
                </li>
                <li>
                    <span>权益抵扣</span>
                    <span id="totalPointQ"></span>
                </li>
            </ul>
        </div>
        <div class="popup-btn">
            <div class="btn-wrap">
                <input id="totalPrice" type="hidden" />
                <p id="totalPriceHtml">22</p>
                <button disabled id="wx_pay" onclick="pay()">付款</button>
            </div>
        </div>
    </div>

    <!-- js -->
    <script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="./js/flexible.js"></script>
    <script>
        $(function () {

            // 获取 输入显示的地方
            var inputDom = $(".false_input");
            // 真值
            var inputText = $(".false_input").text();

            // 输入的值
            var inputHtml = $(".false_input").innerHTML;

            // 验证合法性
            function checkPrice(value, type) {
                var reg = /^[+-]?[1-9]?[0-9]*\.[0-9]*$/, reg1 = /^[0-9]*[1-9][0-9]*$/;
                if (!reg1.test(value) && !reg.test(value) && value !== "0") {
                    return false
                } else if (reg.test(value) && value.split(".")[1].length > 2 || value * 1 < .01 && type == 2 || reg.test(value) && value.split(".")[1].length == 0) {
                    return false
                }
                return true
            };

            // 输入金额的验证
            function money(val) {
                let num = val.toString(); //先转换成字符串类型
                if (num.indexOf('.') == 0) { //第一位就是 .
                    num = '0' + num
                }
                num = num.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
                num = num.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的				
                num = num.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                num = num.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
                //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
                if (num.indexOf(".") < 0 && num != "") {
                    num = parseFloat(num);
                    // 限制小数点前8位数字
                    var reg = /^\d{1,8}$/;
                    if (reg.test(num)) {
                        num = num
                    }
                    else {
                        var num2 = num.toString();
                        num = num2.slice(0, 8);
                    }
                }
                return num
            };

            // 点击数字键盘
            $('.row_wrap .number').click(function () {
                var oDiv = document.getElementById("div");
                // 验证 输入的金额是否正确；不正确自动替换
                let number = oDiv.innerHTML + this.innerHTML;
                oDiv.innerHTML = money(number);

                // 光标隐藏
                if(oDiv.innerHTML!=""){
                    $(".cursor_blink").hide();                  
                }
                
            });
            // 点击删除 
            $('.remove').click(function () {
                var oDiv = document.getElementById("div");
                var oDivHtml = oDiv.innerHTML;
                oDiv.innerHTML = oDivHtml.substring(0, oDivHtml.length - 1);
                // 光标显示
                if(oDiv.innerHTML==""){
                    $(".cursor_blink").show();
                }
            });
            // 立即支付
            $('#submit_button').click(function () {
                let number = $("#div").text();

                if (number) {
                    if (checkPrice(number, 2)) {
                        alert("成功")
                        $('.keyboard_wrap').animate({
                            bottom: -460
                        }, 200);
                    }
                    else {
                        alert("输入金额不合法")
                    }
                }
                else {
                    alert("请输入金额")
                }

            })


            
        });



    </script>
</body>

</html>